{% extends "account/account_base.html" %}
{% block title %}外部账户{% endblock %}
{% block head %} 
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-table.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}">
{% endblock %}
{% block page_content %}

<h1 class="page-header">个人用户详情</h1>
<div class="col-md-12">
	<div class="panel-body" style="padding-bottom:0px;">
		<ul id="myTab" class="nav nav-tabs">
			<li class="active">
				<a href="#info" data-toggle="tab">账户信息</a>
			</li>
			<li>
				<a href="#buy" data-toggle="tab">购车申请</a>
			</li>
			<li>
				<a href="#rent" data-toggle="tab">租赁申请</a>
			</li>
			<li>
				<a href="#finance" data-toggle="tab">金融申请</a>
			</li>
			<li>
				<a href="#finance" data-toggle="tab">服务申请</a>
			</li>
			<li>
				<a href="#operation" data-toggle="tab">操作记录</a>
			</li>
			<li>
				<a href="#invalid" data-toggle="tab">违规记录</a>
			</li>
		</ul>
	<div id="myTabContent" class="tab-content">
		<div class="tab-pane fade in active" id="info"> 
	    		<div class="col-md-8">
				<div style="margin-top:10px;">
		    			<div class="col-md-2" style="font-size:20px;"><center>ID</center></div>
		    			<div class="col-md-3" style="font-size:20px;">{{ user.user_number }}</div>
				</div>
			</div>
			<div class="col-md-8">
				<div style="margin-top:15px;">
	    				<div class="col-md-2" style="font-size:20px;"><center>名称</center></div>
			    		<div class="col-md-3" style="font-size:20px;">{{ user.name }}</div>
				</div>
			</div>
			<div class="col-md-8">
				<div style="margin-top:15px;">
			    		<div class="col-md-2" style="font-size:20px;"><center>电话</center></div>
	    				<div class="col-md-3" style="font-size:20px;">{{ user.phone }}</div>
				</div>
			</div>
			<div class="col-md-8">
				<div style="margin-top:15px;">
	    				<div class="col-md-2" style="font-size:20px;"><center>所在地区</center></div>
			    		<div class="col-md-3" style="font-size:20px;">{{ user.area }}</div>
				</div>
			</div>
			<div class="col-md-8">
				<div style="margin-top:15px;">
			    		<div class="col-md-2" style="font-size:20px;"><center>注册时间</center></div>
	    				<div class="col-md-5" style="font-size:20px;">{{ user.register_date.strftime("%Y-%m-%d %H:%M:%S") }}</div>
				</div>
			</div>
		</div>
		<div class="tab-pane fade" id="buy"> 
			<table id="tb_buy"></table>
		</div>
		<div class="tab-pane fade" id="rent"> 
			<table id="tb_rent"></table>
		</div>
		<div class="tab-pane fade" id="finance"> 
			<table id="tb_finance"></table>
		</div>
		<div class="tab-pane fade" id="service"> 
			<table id="tb_service"></table>
		</div>
		<div class="tab-pane fade" id="operation"> 
			<table id="tb_operation"></table>
		</div>
		<div class="tab-pane fade" id="invalid"> 
			<table id="tb_invalid"></table>
		</div>
	</div>
    </div>
</div>

{% endblock %}
{% block scripts  %}
{{ super() }}
<script src="{{ url_for('static', filename='js/bootstrap-table.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-table-zh-CN.min.js') }}"></script>
<script>
$(function () {

    //初始化Table
    var tb_buy = new TableInit("tb_buy");
    tb_buy.Init();
    var tb_rent = new TableInit("tb_rent");
    tb_rent.Init();
    var tb_finance = new TableInit("tb_finance");
    tb_finance.Init();
    var tb_finance = new TableInit("tb_service");
    tb_service.Init();
    var tb_operation = new TableInit("tb_operation");
    tb_operation.Init();
    var tb_invalid = new TableInit("tb_invalid");
    tb_invalid.Init();

});


var TableInit = function (table_id) {
    var oTableInit = new Object();
    var urls = new Array();
    urls['tb_buy'] = "/account/outside/details/get_list/?list_type=buy&uid={{uid}}";
    urls['tb_rent'] = "/account/outside/details/get_list/?list_type=rent&uid={{uid}}";
    urls['tb_finance'] = "/account/outside/details/get_list/?list_type=finance&uid={{uid}}";
    urls['tb_service'] = "/account/outside/details/get_list/?list_type=service&uid={{uid}}";
    urls['tb_operation'] = "/account/outside/details/get_list/?list_type=operation&uid={uid{}}";
    urls['tb_invalid'] = "/account/outside/details/get_list/?list_type=invalid&uid={{uid}}";

    //初始化Table
    table = document.getElementById(table_id);
    oTableInit.Init = function () {
	var columns;
	if(table_id==='tb_invalid'){
		columns = [{
		    field: 'freeze_time',
		    title: '冻结时间',
		    align: 'center',
		}, {
                    field: 'freeze_name',
                    title: '冻结操作人',
                    align: 'center',
            	},{
                    field: 'reason',
                    title: '冻结原因',
		    align: 'center',
           	 }, {
                    field: 'recovery_name',
                    title: '恢复操作人',
                    align: 'center',
                },{
                    field: 'recovery_time',
                    title: '恢复时间',
		    align: 'center',
           	},];
	}
	else if(table_id==='tb_operation'){
		columns = [{
		    field: 'ip',
		    title: 'IP',
		    align: 'center',
		}, {
                    field: 'operator',
                    title: '操作人',
                    align: 'center',
            	},{
                    field: 'phone',
                    title: '号码',
		    align: 'center',
           	 }, {
                    field: 'operation',
                    title: '操作内容',
                    align: 'center',
                }, {
                    field: 'time',
                    title: '操作时间',
		    align: 'center',
           	}, {
                    field: 'area',
                    title: '地区',
                    align: 'center',
                },];
	}
	else{
		columns = [{
		    field: 'number',
		    title: 'ID',
		    align: 'center',
	   	 }, {
                    field: 'title',
                    title: table_id==="tb_buy" ? '车辆信息' : '产品信息',
                    align: 'center',
            	},{
                    field: 'phone',
                    title: '联系电话',
		    align: 'center',
            	}, {
                    field: 'time',
                    title: '提交时间',
		    align: 'center',
            	}, {
		    field: 'area',
		    title: '地区',
		    align: 'center',
	    	}, {
                    field: 'state',
                    title: '状态',
                    align: 'center',
            	},{
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    formatter: function(value){
			    link = '<a target="_blank" href="/tracking/track' + value + '" title="查看用户信息">查看</a>';
		            return link;
		    },
           	},];
	}

        $(table).bootstrapTable({
            url: urls[table_id],                //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            pagination: true,                   //是否显示分页（*）
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            columns: columns,
        });
    };

    return oTableInit;
};

</script>
<script>
	$('#nav_user').attr("class", "active");
	$('#OutsideMenu').addClass("in");
	$('#li_individual').css("background", "#E0EEE0");
</script>
{% endblock %}
